<template>
    <div class="home com-class">
        <div class="left-div">
            <div class="container left-1">
                <p class="title">2020年突发事件统计</p>
                <div class="div-1">
                    <p title>突发事件</p>
                    <p item item-1>总数&nbsp;&nbsp;&nbsp;<span number>227</span>件</p>
                    <p item item-2>响应数&nbsp;&nbsp;&nbsp;<span number>127</span>件</p>
                </div>
                <div class="div-2">
                    <div class="item">
                        <p class="floor-4">自然灾害</p>
                        <p class="floor-3">事件数&nbsp;&nbsp;<span number>80</span>件</p>
                        <p class="floor-2">响应数&nbsp;&nbsp;<span number>60</span>件</p>
                        <p class="floor-1">同比&nbsp;&nbsp;<span number>13%</span><a class="jiantou-img data-up"></a></p>
                    </div>
                    <div class="item">
                        <p class="floor-4">事故灾难</p>
                        <p class="floor-3">事件数&nbsp;&nbsp;<span number>80</span>件</p>
                        <p class="floor-2">响应数&nbsp;&nbsp;<span number>60</span>件</p>
                        <p class="floor-1">同比&nbsp;&nbsp;<span number>13%</span><a class="jiantou-img data-up"></a></p>
                    </div>
                    <div class="item">
                        <p class="floor-4">公共卫生</p>
                        <p class="floor-3">事件数&nbsp;&nbsp;<span number>80</span>件</p>
                        <p class="floor-2">响应数&nbsp;&nbsp;<span number>60</span>件</p>
                        <p class="floor-1">同比&nbsp;&nbsp;<span number>13%</span><a class="jiantou-img data-up"></a></p>
                    </div>
                    <div class="item">
                        <p class="floor-4">社会安全</p>
                        <p class="floor-3">事件数&nbsp;&nbsp;<span number>80</span>件</p>
                        <p class="floor-2">响应数&nbsp;&nbsp;<span number>60</span>件</p>
                        <p class="floor-1">同比&nbsp;&nbsp;<span number>13%</span><a class="jiantou-img data-up"></a></p>
                    </div>
                </div>
            </div>
            <div class="container left-2">
                <p class="title">历年突发事件总量</p>
                <div class="echart-left-1" ref="echartLeft1"></div>

            </div>
            <div class="container left-3">
                <p class="title">历年突发事件死亡人数和经济损失</p>
                <div class="echart-left-2" ref="echartLeft2"></div>
            </div>

        </div>

        <div class="center-div">
             <BaseMap v-if="mapShow" show-type="emergencies" :area-code="$local.getAreaCode()" :area-type="$local.getAreaType()" @changeMapArea="changeMapArea"></BaseMap>
        </div>

        <div class="right-div">
            <div class="container right-1">
                <p class="title">预警信息</p>
                <p class="tab-bar font-bold">
                    <span class="option" :class='warningType == "country"?"active":""' @click="selectWarningType('country')">国家预警</span>
                    <span class="option" :class='warningType == "important"?"active":""' @click="selectWarningType('important')">重要预警</span>
                    <span class="option" :class='warningType == "latest"?"active":""' @click="selectWarningType('latest')">最新预警</span>
                </p>
                <div class="content">
                    <p class="head ">
                        <span class="head-item i-1">发布时间</span>
                        <span class="head-item i-2">概要</span>
                        <span class="head-item i-3">发布单位</span>
                        <span class="head-item i-4">状态</span>
                    </p>
                    <div class="body">
                        <div class="body-row">
                            <div class="body-row-item i-1">
                                <p>2020-9-16</p>
                                <p>09:00:00</p>
                            </div>
                            <div class="body-row-item i-2">
                                <span>警示信息:国家卫生健康委员会发布新冠病毒提示。</span>
                            </div>
                            <div class="body-row-item i-3">
                                <span>国家卫生健康委员会</span>
                            </div>
                            <div class="body-row-item i-4">
                                <span button>启动</span>
                            </div>
                        </div>
                        <div class="body-row">
                            <div class="body-row-item i-1">
                                <p>2020-9-16</p>
                                <p>09:00:00</p>
                            </div>
                            <div class="body-row-item i-2">
                                <span>警示信息:国家卫生健康委员会发布新冠病毒提示。</span>
                            </div>
                            <div class="body-row-item i-3">
                                <span>国家卫生健康委员会</span>
                            </div>
                            <div class="body-row-item i-4">
                                <span button>启动</span>
                            </div>
                        </div>
                        <div class="body-row">
                            <div class="body-row-item i-1">
                                <p>2020-9-16</p>
                                <p>09:00:00</p>
                            </div>
                            <div class="body-row-item i-2">
                                <span>警示信息:国家卫生健康委员会发布新冠病毒提示。</span>
                            </div>
                            <div class="body-row-item i-3">
                                <span>国家卫生健康委员会</span>
                            </div>
                            <div class="body-row-item i-4">
                                <span button>启动</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container right-2">
                <p class="title">应急资源</p>
                <div class="item item-1">
                    <span class="i-1">应急救援力量</span>
                    <span class="i-2">队伍总数</span>
                    <span class="i-3"><span number>167</span>支</span>
                    <span class="i-4">总人数</span>
                    <span class="i-5"><span number>100</span>人</span>
                </div>
                <div class="item item-2">
                    <span class="i-1">应急专家</span>
                    <span class="i-2">专家类型</span>
                    <span class="i-3"><span number>14</span>类</span>
                    <span class="i-4">总人数</span>
                    <span class="i-5"><span number>12</span>人</span>
                </div>
                <div class="item item-3">
                    <span class="i-1">应急物资</span>
                    <span class="i-2">归属单位</span>
                    <span class="i-3"><span number>8</span>家</span>
                    <span class="i-4">物资总数</span>
                    <span class="i-5"><span number>200</span>件</span>
                </div>
                <div class="item item-4">
                    <span class="i-1">避难场所</span>
                    <span class="i-2">场所总数</span>
                    <span class="i-3"><span number>4</span>个</span>
                    <span class="i-4">容纳人数</span>
                    <span class="i-5"><span number>2.6</span>万人</span>
                </div>
            </div>
            <div class="container right-3">
                <p class="title">预案</p>
                <p class="options">
                    <span class="option" :class="planType === 'graphics'?'active':''" @click="selectPlanType('graphics')">图形</span>
                    <span class="option" :class="planType === 'list'?'active':''" @click="selectPlanType('list')">列表</span>
                </p>
                <div container>
                    <div class="left-c">
                        <div class="left-echart" ref="echartRight1"></div>
                        <p class="sub-title font-bold">预案总数</p>
                    </div>
                    <div class="right-c">
                        <p item item1>自然灾害类预案: <span class="font-color-greed">21%</span>/<span class="font-color-greed">11</span>项</p>
                        <p item item2>事故灾难类预案: <span class="font-color-blue">22%</span>/<span class="font-color-blue">12</span>项</p>
                        <p item item3>公共卫生类预案: <span class="font-color-orange">23%</span>/<span class="font-color-orange">13</span>项</p>
                        <p item item4>社会安全类预案: <span class="font-color-purple">24%</span>/<span class="font-color-purple">14</span>项</p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import BaseMap from '../../../../components/BaseMap/BaseMap'
    export default {
        name: "tufashijian",
        data() {
            return {
                mapShow: true,
                echartOptionLeft1: {},
                echartOptionLeft2: {},
                echartOptionRight1: {},
                warningType: 'country',
                planType: 'graphics',
                echartObjLeft1: {},
                echartObjLeft2: {},
                echartObjRight1: {},
            }
        },
        created() {
            this.echartOptionLeft1 = {
                color: ['#51BEF1'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                    transitionDuration: 0,//解决echarts图闪动
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                legend:{
                    right:'5%'
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['2016', '2017', '2018', '2019', '2020'],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitLine:{
                            show:false
                        },
                        min: 0,
                        max: 800,
                        interval: 200,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: '事件总数',
                        type: 'bar',
                        barWidth: '37%',
                        data: [589, 325, 333, 224, 123],
                        color:'#7ECEF4',
                        label: {
                            show: true,
                            color:'black',
                            position:'top',
                            fontSize:16,
                            fontWeight:'bold'
                        },
                    }
                ]
            };
            this.echartOptionLeft2 = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    },
                    transitionDuration: 0,//解决echarts图闪动
                },
                legend: {
                    data: [
                        {name: '死亡人数', icon: 'circle', textStyle: {}},
                        {name: '经济损失数(万元)', icon: 'roundRect', textStyle: {}},
                    ],
                    right: 0
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['2016', '2017', '2018', '2019', '2020'],
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisTick: {
                            show: false
                        },
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '',
                        min: 0,
                        interval: 100,
                        axisLabel: { formatter: '{value}' },
                        axisLine: { show: false },
                        axisTick: { show: false },
                        splitLine: { show: false }
                    },
                    {
                        type: 'value',
                        name: '',
                        min: 0,
                        interval: 2000,
                        axisLabel: { formatter: '{value}' },
                        axisLine: { show: false },
                        axisTick: { show: false },
                        splitLine: { show: false }
                    }
                ],
                grid: {
                    bottom: '10%'
                },
                series: [
                    {
                        name: '死亡人数',
                        type: 'bar',
                        data: [200, 300, 250, 400, 345],
                        color:'#80C269',
                        barWidth: '35%'
                    },
                    {
                        name: '经济损失数(万元)',
                        type: 'line',
                        yAxisIndex: 1,
                        data: [3333, 4444, 2432, 4532, 2345],
                        color:'#f1be3a'
                    }
                ]
            };
            this.echartOptionRight1 = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)',
                    show:true,
                    transitionDuration: 0,//解决echarts图闪动
                },
                legend: {
                    orient: 'vertical',
                    left: 10,
                    data: ['流入量','流出量'],
                    show:false
                },
                series: [
                    {
                        name: '统计信息',
                        type: 'pie',
                        radius: ['60%', '85%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center',
                            fontSize:40
                        },
                        center: ['35%', 'center'],
                        emphasis: {
                            label:{
                                show: true,
                                formatter:function(param){
                                    return param.value
                                },
                                fontSize:30,
                                fontWeight:'bold'
                            },
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: 12, name: '自然灾害类',itemStyle:{color: '#6ada18'}},
                            {value: 14, name: '事故灾难类',itemStyle:{color: '#2dc3e8'}},
                            {value: 13, name: '公共卫生类',itemStyle:{color: '#f1bc30'}},
                            {value: 13, name: '社会安全类',itemStyle:{color: '#8B4789'}},
                        ]
                    }
                ]
            };
            
        },
        methods: {
            //地图区域发生变化
            changeMapArea() {
                //重新渲染地图组件
                this.reloadMap();
                //todo: 修改各个区域的数据
            },
            //强制重新渲染地图
            reloadMap() {
                // 移除组件
                this.mapShow = false;
                // 在组件移除后，重新渲染组件
                // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
                this.$nextTick(() => {
                    this.mapShow = true;
                })
            },
            selectWarningType(cmd) {
                switch(cmd) {
                    case 'country':this.warningType = 'country';break;
                    case 'important':this.warningType = 'important';break;
                    case 'latest':this.warningType = 'latest';break;
                }
            },
            selectPlanType(cmd) {
                switch(cmd) {
                    case 'graphics':this.planType = 'graphics';break;
                    case 'list':this.planType = 'list';break;
                }
            },
            initEcharts(container, option) {
                let e = this.$echarts.init(container);
                e.setOption(option);
                return e;
            },
           
        },
        mounted() {
            this.echartObjLeft1 = this.initEcharts(this.$refs.echartLeft1, this.echartOptionLeft1);
            this.echartObjLeft2 = this.initEcharts(this.$refs.echartLeft2, this.echartOptionLeft2);
            this.echartObjRight1 = this.initEcharts(this.$refs.echartRight1, this.echartOptionRight1);
        },
        
        components: {
            BaseMap,
        },
    }
</script>

<style scoped lang="less">
    .el-select-dropdown__item{
        text-align: center;
    }
    .el-select-dropdown__item.selected {
        font-weight: normal;
        background: #faf0e4;
        color: @font_color;
    }
    .home {
        height: 100%;
        width: 100%;
        padding: 0;
        color: @font_color;
        div.container {
            padding: 0.02rem 0.01rem 0.01rem 0.01rem;
            box-sizing: border-box;
            background-color: @color3;
            p.title {
                font-size: 0.02rem;
                font-weight: bold;
                line-height: 0.026rem;
                height: 0.026rem;
            }
        }
        .left-div{
            position: absolute;
            margin: .015rem 0 .015rem .015rem;
            width: calc(30% - .015rem);
            height: calc(100% - .03rem);
            left: 0%;
            div.left-1 {
                height: calc( (100% - 0.04rem) * 0.40);
                margin-bottom: 0.02rem;
                div.div-1 {
                    height: calc(100% - 0.026rem);
                    width: 45%;
                    display: inline-block;
                    padding-top: 0.08rem;
                    box-sizing: border-box;
                    p[title] {
                        height: 0.031rem;
                        line-height: 0.031rem;
                        text-align: center;
                        font-size: 0.024rem;
                        font-weight: bold;
                        padding-bottom: 0.025rem;
                    }
                    p[item] {
                        text-align: right;
                        font-size: 0.02rem;
                        height: 0.026rem;
                        line-height: 0.026rem;
                        font-weight: bold;
                        padding-right: 0.06rem;
                        span[number] {
                            color: @color1;
                        }
                    }
                    p[item-1] {
                        padding-bottom: 0.003rem;
                    }
                }
                div.div-2 {
                    height: calc(100% - 0.026rem);
                    width: 55%;
                    float: right;
                    div.item {
                        width: 50%;
                        height: 50%;
                        display: inline-block;
                        text-align: center;
                        font-size: 0.017rem;
                        p.floor-4 {
                            font-size: 0.02rem;
                            height: 0.026rem;
                            line-height: 0.026rem;
                            font-weight: bold;
                            padding-bottom: 0.007rem;
                        }
                        p.floor-3 {
                            padding-bottom: 0.007rem;
                            span[number] {
                                color: @color4;
                            }
                        }
                        p.floor-2 {
                            padding-bottom: 0.007rem;
                            span[number] {
                                color: @color4;
                            }
                        }
                        p.floor-1 {
                            span[number] {
                                color: @font_color2;
                            }
                        }
                    }
                }
            }
            div.left-2 {
                height: calc( (100% - 0.04rem) * 0.30);
                margin-bottom: 0.02rem;
                div.echart-left-1 {
                    width: 100%;
                    height: calc(100% - 0.026rem);
                }
            }
            div.left-3 {
                height: calc( (100% - 0.04rem) * 0.30);
                div.echart-left-2 {
                    width: 100%;
                    height: calc(100% - 0.026rem);
                }
            }
        }

        .center-div{
            position: absolute;
            margin: .015rem;
            width: calc(40% - .03rem);
            height: calc(100% - .03rem);
            left: 30%;
            background: #ffffff;
        }

        .right-div{
            position: absolute;
            margin: .015rem .015rem .015rem 0;
            width: calc(30% - .015rem);
            height: calc(100% - .03rem);
            right: 0%;
            div.right-1 {
                height: calc( (100% - 0.04rem) * 0.44);
                margin-bottom: 0.02rem;
                p.tab-bar {
                    line-height: 0.03rem;
                    font-size: 0.017rem;
                    height: 0.035rem;
                    padding: 0.01rem 0 0 0.02rem;
                    span.option {
                        width: 22%;
                        display: inline-block;
                    }
                    span.option:hover {
                        color: @font_color1;
                        cursor: pointer;
                    }
                    span.active {
                        color: @font_color1;
                    }
                }
                div.content {
                    height: calc(100% - 0.071rem);
                    p.head {
                        height: 0.03rem;
                        line-height: 0.03rem;
                        font-size: 0.016rem;
                        background-color: @bg_color2;
                        span.head-item {
                            display: inline-block;
                            text-align: center;
                        }
                        span.i-1 {
                            width: 22%;
                        }
                        span.i-2 {
                            width: 38%;
                        }
                        span.i-3 {
                            width: 22%;
                        }
                        span.i-4 {
                            width: 18%;
                        }
                    }
                    div.body {
                        height: calc(100% - 0.03rem);
                        div.body-row {
                            height: calc(100% / 3);
                            div.body-row-item {
                                width: 25%;
                                height: 100%;
                                display: inline-flex;
                                flex-direction: column;
                                justify-content: center;
                                align-items: center;
                                font-size: 0.016rem;
                                position: relative;
                                top: -0.005rem;
                                span {
                                    text-align: center;
                                }
                            }
                            div.i-1 {
                                width: 22%;
                            }
                            div.i-2 {
                                width: 38%;
                            }
                            div.i-3 {
                                width: 22%;
                            }
                            div.i-4 {
                                width: 18%;
                                span[button] {
                                    color: @font_color3;
                                    position: relative;
                                    top: 0.003rem;
                                }
                                span[button]:hover {
                                    cursor: pointer;
                                }
                            }
                        }
                        div.body-row:nth-child(2) {
                            background: rgba(0, 0, 0, 0.05);
                        }
                    }
                }
            }
            div.right-2 {
                height: calc( (100% - 0.04rem) * 0.27);
                margin-bottom: 0.02rem;
                div.item {
                    display: inline-flex;
                    flex-direction: column;
                    height: calc(100% - 0.026rem);
                    justify-content: center;
                    align-items: center;
                    font-size: 0.017rem;
                    span.i-1 {
                        font-weight: bold;
                        padding-bottom: 0.012rem;
                        font-size: 0.017rem;
                    }
                    span.i-3 {
                        padding-bottom: 0.012rem;
                        span[number] {
                            color: @color4;
                        }
                    }
                    span.i-5 {
                        span[number] {
                            color: @color4;
                        }
                    }
                }
                div.item-1 {
                    width: 33%;
                }
                div.item-2 {
                    width: calc(67% / 3);
                }
                div.item-3 {
                    width: calc(67% / 3);
                }
                div.item-4 {
                    width: calc(67% / 3);
                }
            }
            div.right-3 {
                height: calc( (100% - 0.04rem) * 0.29);
                p.options {
                    height: 0.03rem;
                    line-height: 0.03rem;
                    font-size: 0.015rem;
                    padding-left: 0.02rem;
                    span:nth-of-type(1) {
                        margin-right: 0.03rem;
                    }
                    span.option:hover {
                        color: @color4;
                        cursor: pointer;
                    }
                    span.active {
                        color: @color4;
                    }
                }
                div[container] {
                    height: calc(100% - 0.056rem);
                    div.left-c {
                        height: 100%;
                        width: 45%;
                        display: inline-block;
                        div.left-echart {
                            height: 85%;
                        }
                        p.sub-title {
                            height: 15%;
                            text-align: center;
                            font-size: 0.016rem;
                            padding-right: 0.06rem;
                        }
                    }
                    div.right-c {
                        height: 100%;
                        width: 55%;
                        float: right;
                        font-size: 0.017rem;
                        p[item] {
                            padding-bottom: 0.01rem
                        }
                    }
                }

            }
        }
    }
</style>